<template>
	<view>
		<pagehead></pagehead>
		<view class="head">
			
			<view style="text-align: center; padding:22px 0;">
				<text>
					<p style="font-size: 35rpx;">还没有添加爱车</p>
					<p style="font-size: 30rpx;">添加车型打造专属保养方案</p>
				</text>
			</view>

		</view>
		<view class="addCar">
			<u-button style=" top:20%; margin-top:4px;" shape="circle" size="medium" type="primary" @click="addCar()">
				去添加</u-button>
		</view>
		<!--预约等服务，广告等服务-->
		<view class="body">
			<view>
				<u-grid :col="4" :border="false">
					<u-grid-item v-for="(item,index) in tabbar.children" :key="item.text" @click="click"
						bg-color="#f8f9fa" index="1" key="1">
						<!-- <u-icon name="order" :size="46"></u-icon> -->
						<image :src="item.iconPath" style="width: 60rpx; height: 60rpx;"></image>
						<view class="grid-text">{{item.text}}</view>
					</u-grid-item bg-color="#f8f9fa">
				</u-grid>
			</view>
			<!--广告-->
			<view>
				<u-swiper :list="list"></u-swiper>
			</view>
			<!--附近门店-->
			<view style="margin-top: 10upx;">
				<text>
					<p style="font-size: 35rpx;color:#000000">--附近门店--</p>
				</text>
			</view>
			<!--附近门店-->
			<view>
				<view class="demo-warter" v-for="(item, index) in leftList" :key="index">
					<image :src="item.image" style="width: 100%;height: 50%;"></image>
					<view class="demo-title">
						{{item.title}}
					</view>
					<view class="demo-price">
						{{item.price}}元
					</view>
					<view class="demo-tag">
						<view class="demo-tag-owner">
							自营
						</view>
						<view class="demo-tag-text">
							放心购
						</view>
					</view>
				</view>

			</view>
		</view>

	</view>
</template>

<script>
	import pagehead from '@/common/components/head/page-head.vue'
	export default {
		components: {
			pagehead
		},
		name: 'HomeIndex',
		props: {
			selectedTabbar: {
				type: Object
			}
		},
		data() {
			return {
				flowList: [],
				list: [{
						image: 'https://cdn.uviewui.com/uview/swiper/1.jpg',
						title: '昨夜星辰昨夜风，画楼西畔桂堂东'
					},
					{
						image: 'https://cdn.uviewui.com/uview/swiper/2.jpg',
						title: '身无彩凤双飞翼，心有灵犀一点通'
					},
					{
						image: 'https://cdn.uviewui.com/uview/swiper/3.jpg',
						title: '谁念西风独自凉，萧萧黄叶闭疏窗，沉思往事立残阳'
					}
				],
				leftList: [{
					price: 35,
					title: '北国风光，千里冰封，万里雪飘',
					shop: '李白杜甫白居易旗舰店',
					image: 'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=2660812905,273780111&fm=26&gp=0.jpg',
				}],
				tabbar: {
					children: []
				}
			}
		},
		mounted() {
			this.tabbar =this.$props.selectedTabbar
		},
		methods: {
			addCar() {
				this.$u.route({
					url: 'pages/home/add-car/index',
					params: {
						name: 'lisa'
					}
				})
			},
			// 初始话数据
			init(data) {
				
			},
			click(index) {
				if ("1" === index) {
					this.$u.route({
						url: 'pages/home/online-booking/index',
						params: {
							name: 'lisa'
						}
					})
				}

				if ("2" === index) {
					this.$u.route({
						url: 'pages/home/maintenance-card/index',
						params: {
							name: 'lisa'
						}
					})
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background-color: #f8f9fa;
	}

	.head {
		height: 220rpx;
		background-color: #228be6;
	}

	.addCar {
		margin: 0 auto;
		text-align: center;
		height: 130rpx;
		width: 700rpx;
		background-color: white;
		border-radius: 10px;
		margin-top: -60rpx;
		position: relative;
	}

	.body {
		width: 700upx;
		margin: 0 auto;
		text-align: center;
		background-color: #f8f9fa;
	}

	p {
		color: white;
	}

	.demo-warter {
		border-radius: 8px;
		margin: 5px;
		background-color: white;
		padding: 8px;
		position: relative;
		width: 340rpx;
		height: 380rpx;
	}

	.demo-image {
		width: 100%;
		border-radius: 4px;
	}

	.demo-title {
		font-size: 30rpx;
		margin-top: 5px;
		color: $u-main-color;
	}

	.demo-tag {
		display: flex;
		margin-top: 5px;
	}

	.demo-tag-owner {
		background-color: $u-type-error;
		color: #FFFFFF;
		display: flex;
		align-items: center;
		padding: 4rpx 14rpx;
		border-radius: 50rpx;
		font-size: 20rpx;
		line-height: 1;
	}

	.demo-tag-text {
		border: 1px solid $u-type-primary;
		color: $u-type-primary;
		margin-left: 10px;
		border-radius: 50rpx;
		line-height: 1;
		padding: 4rpx 14rpx;
		display: flex;
		align-items: center;
		border-radius: 50rpx;
		font-size: 20rpx;
	}

	.demo-price {
		font-size: 30rpx;
		color: $u-type-error;
		margin-top: 5px;
	}

	.demo-shop {
		font-size: 22rpx;
		color: $u-tips-color;
		margin-top: 5px;
	}
</style>
